<template>
  <div style="height: 100%; width: 100%; position: relative;" ref="maindev">
    <div class="pagetop">
      <div style="width:100%;">
        <table style="width: 100%; font-size: 12px;white-space: nowrap;" border="0">
          <col style="width: 6%;" />
          <col style="width: 11%;" />
          <col style="width: 1%;" />
          <col style="width: 11%;" />
          <col style="width: 6%;" />
          <col style="width: 9%;" />
          <col style="width: 6%;" />
          <col style="width: 8%;" />
          <col style="width: 6%;" />
          <col style="width: 6%;" />
          <col style="width: 6%;" />
          <col style="width: 9%;" />
          <col style="width: 6%;" />
          <col style="width: 9%;" />
          <tr>
            <td align="right">
              标本日期
            </td>
            <td>
              <el-date-picker v-model="searchobj.strdate" :clearable="false" type="date" placeholder="选择日期"
                value-format="yyyy-MM-dd" style="width: 100%;"> </el-date-picker>
            </td>
            <td>至</td>
            <td>
              <el-date-picker v-model="searchobj.enddate" type="date" :clearable="false" placeholder="选择日期"
                value-format="yyyy-MM-dd" style="width: 100%;"> </el-date-picker>
            </td>
            <td align="right">病人类型</td>
            <td>
              <!-- @dblclick.native="popMultipleChk(txtpattype, 'txtpattype', pattypeOption, '病人类型选择')" -->
              <el-select v-model="searchobj.pattype" filterable clearable>
                <el-option v-for="(item, index) in pattypeOption" :value="item.data" :label="item.display"
                  :key="index"></el-option>
              </el-select>
            </td>
            <td align="right">病人性别</td>
            <td>
              <el-select v-model="searchobj.patsex" style="width: 100%;" filterable clearable>
                <el-option v-for="(item, index) in sexOption" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </td>

            <td align="right">细菌单价</td>
            <td>
              <el-input v-model="searchobj.germprice" clearable></el-input>
            </td>
            <td align="right">申请病区</td>
            <td>
              <el-select v-model="searchobj.reqward"
                @dblclick.native="popMultipleChk(searchobj.reqward, 'reqward', wardOption, '病区选择')" filterable clearable>
                <el-option v-for="(item, index) in wardOption" :key="index" :value="item.data" :label="item.display">
                </el-option>
              </el-select>
            </td>

            <td align="right">细菌标志</td>
            <td>
              <el-select v-model="searchobj.germflag" placeholder="请选择" style="width:100%" filterable clearable>
                <el-option key="0" label="普通项目" value="0"></el-option>
                <el-option key="1" label="培养阴性结果" value="1"></el-option>
                <el-option key="2" label="致病菌" value="2"></el-option>
                <el-option key="3" label="正常菌种" value="3"></el-option>
                <el-option key="4" label="涂片结果" value="4"></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td align="right">报告单元</td>
            <td colspan="3">
              <!-- <el-select v-model="searchobj.rptunitid" @dblclick.native="popMultipleChk(searchobj.rptunitid, 'txtlabgroup', rptunitOption, '请选择报告单元')" filterable clearable style="width:100%">
                            <el-option v-for="(item, index) in rptunitOption" :key="index" :value="item.data" :label="item.display"></el-option>
                        </el-select> -->
              <rm-ddl-rptunit @change="rptunitchange" v-model="searchobj.rptunitid" reporttype="20" width="100%"
                clearable></rm-ddl-rptunit>
            </td>
            <td align="right">申请科室</td>
            <td>
              <el-select v-model="searchobj.reqdept"
                @dblclick.native="popMultipleChk(searchobj.reqdept, 'reqdept', deptOption, '申请科室选择')" filterable
                clearable>
                <el-option v-for="(item, index) in deptOption" :key="index" :value="item.data" :label="item.display">
                </el-option>
              </el-select>
            </td>
            <td align="right">标本类型</td>
            <td>
              <el-select v-model="searchobj.sample"
                @dblclick.native="popMultipleChk(searchobj.sample, 'sample', specimenOption, '请选择标本类型')" filterable
                clearable>
                <el-option v-for="(item, index) in specimenOption" :key="index" :value="item.data"
                  :label="item.display"></el-option>
              </el-select>
            </td>
            <td align="right">药敏单价</td>
            <td>
              <el-input v-model="searchobj.medprice" clearable></el-input>
            </td>
            <td align="right">送检医院</td>
            <td colspan="3">
              <rm-ddl-common @change="hospitalchange" datatype="hospital" dataname="医院" v-model="searchobj.hospitalcode"
                width="100%"></rm-ddl-common>
              <!-- <el-select v-model="searchobj.hospitalcode" @dblclick.native="popMultipleChk(searchobj.hospitalcode, 'hospitalcode', hospOption, '请选择送检医院')" filterable clearable style="width:100%">
                            <el-option v-for="(item, index) in hospOption" :key="index" :value="item.data" :label="item.display"></el-option>
                        </el-select> -->
            </td>
          </tr>
          <tr>
            <td align="right">检验者</td>
            <td>
              <rm-ddl-common datatype="userinfo" dataname="检验者" v-model="searchobj.report_user" size="mini" width="100%"
                @change="reportuserChange"></rm-ddl-common>
            </td>
            <td align="right">审核者</td>
            <td>
              <rm-ddl-common datatype="userinfo" dataname="审核者" v-model="searchobj.rechk_user" size="mini" width="100%"
                @change="rechkuserChange"></rm-ddl-common>
            </td>
          </tr>
          <tr>
            <td colspan="14" align="right">
              <div>
                <el-button @click.native="BtnQuery" v-has="'PINQUERY'" type="primary" icon="el-icon-search">查询</el-button>
                <!-- <el-button @click.native="BtnSort" icon="el-icon-sort">排序</el-button> -->
                <el-button @click.native="BtnClear" icon="el-icon-close">清除</el-button>
                <el-button @click.native="BtnExport" icon="el-icon-download">导出</el-button>
                <el-button @click.native="BtnPrint(1)" icon="el-icon-printer">打印</el-button>
                <el-button v-if="rptStyleSettingState" @click.native="BtnPrint(2)"
                  class="el-icon-edit-outline">打印样式设计</el-button>
              </div>

            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="pagecenter">
      <div class="middle-center">
        <vxe-table :data.sync="tableData" :loading="loading" :select-config="{ reserve: true }"
          :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row class="mytable-style"
          highlight-hover-column highlight-hover-row how-header-overflow ref="xTable" resizable show-overflow size="mini"
          stripe show-header-overflow :optimization="{ animat: false }" header-align="center" :key="xTablekey" show-footer
          :footer-method="footerMethod" :footer-cell-class-name="footerCellClassName">
          <vxe-table-column field="细菌名称" sortable title="细菌名称" width="180" show-overflow></vxe-table-column>
          <vxe-table-column field="细菌次数" sortable title="细菌次数" width="80" show-overflow header-align="center"
            align="right"></vxe-table-column>
          <vxe-table-column field="细菌金额" sortable title="细菌金额" width="80" show-overflow header-align="center"
            align="right"></vxe-table-column>
          <vxe-table-column field="药敏项次" sortable title="药敏项次" width="80" show-overflow align="right"></vxe-table-column>
          <!-- <vxe-table-column field="药敏次数" sortable title="药敏次数" width="80" show-overflow align="right"></vxe-table-column> -->
          <vxe-table-column field="药敏金额" sortable title="药敏金额" width="80" show-overflow header-align="center"
            align="right"></vxe-table-column>
          <!-- <vxe-table-column field="申请科室" sortable title="申请科室" width="80" show-overflow header-align="center" align="right"></vxe-table-column> -->
          <vxe-table-column field="合计金额" sortable title="合计金额" width="90" show-overflow header-align="center"
            align="right"></vxe-table-column>
        </vxe-table>
      </div>
    </div>

    <!--多选弹窗--->
    <el-dialog width="900px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :title="multichktitle"
      :visible.sync="dialogMultipleVisible" :destroy-on-close="true">
      <rm-SqlMultiple :leftOption="option1" :rightOption="option2" :name="fieldname"
        @change="closedialog"></rm-SqlMultiple>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
  name: "LIS910",
  data() {
    return {
      sexOption: [
        { label: "", value: "" },
        { label: "男", value: "1" },
        { label: "女", value: "2" },
        { label: "未知", value: "3" },
      ],
      dialogMultipleVisible: false,
      loading: false,
      option1: [],
      option2: [],
      rptStyleSettingState: false,
      rptunitname: "",
      fieldname: "",
      tableData: [],
      xTablekey: 0,
      multichktitle: "",
      pattypeOption: [],
      deptOption: [],
      wardOption: [],
      hospOption: [],
      doctorOption: [],
      rptunitOption: [],
      rptunitGroupOption: [],
      reportcommOption: [],
      labgroupOption: [],
      specimenOption: [],
      deptgroupOption: [], //deptcomb
      //以下为查询条件
      searchobj: {
        strdate: this.$pub.InitDateTime2(0).datefrom,
        enddate: this.$pub.InitDateTime2(0).dateto,
        pattype: "",
        patsex: "",
        germprice: "60.00",
        rptunitid: "",
        hospitalcode: "",
        reqdept: "",
        reqward: "",
        germflag: "2",
        sample: "",
        medprice: "60.00",
        report_user: "",
        rechk_user: "",
      },

      //以下为排序数组
      sortArr: [],
      SortTableColumn: [
        { title: "细菌名称", field: "cp_samplecnt" },
        { title: "细菌次数", field: "cp_cnt" },
        { title: "细菌金额", field: "cp_amt" },
        { title: "药敏项次", field: "cp_rs" },
        { title: "药敏金额", field: "cp_redocnt" },
        { title: "合计金额", field: "cp_amt" },
      ],
      tableColumn: [],
      reportusername: "",
      rechkusername: "",
    };
  },
  created() {
    this.initOption();
    this.getLoginutype();
    this.InitPage(); //初始化主列表
  },
  mounted() { },
  updated() { },
  methods: {
    popMultipleChk(e, fieldname, option, title) {
      let temp = XEUtils.clone(option, true);
      this.option1 = [];
      this.option2 = [];
      if (e != "") {
        let k = e.split(",");
        k.forEach((item) => {
          let ndata = temp.find((m) => m.data == item);
          if (ndata != undefined && ndata != null) {
            this.option2.push(ndata);
          }
        });
        temp.forEach((item) => {
          if (k.indexOf(item.data + "") < 0) {
            this.option1.push(item);
          }
        });
      } else {
        this.option1 = temp;
      }
      this.fieldname = fieldname;
      this.multichktitle = title;
      this.dialogMultipleVisible = true;
    },
    closedialog(value, name) {
      if (value != "close") {
        this.searchobj[name] = value;
      }
      this.dialogMultipleVisible = false;
    },
    getLoginutype() {
      let loginutype = this.$tool.getSession(this.$tool.loginutype);
      if (loginutype == "G") {
        this.rptStyleSettingState = true;
      }
    },
    async initOption() {
      try {
        const res = await this.$tool.request({
          url: "LIS/LIS6/LIS610",
          method: "post",
          data: {
            action: "initOption",
          },
        });
        this.pattypeOption = res.pattypeOption;
        this.deptOption = res.deptOption;
        this.hospOption = res.hospOption;
        this.doctorOption = res.doctorOption;
        this.rptunitOption = res.rptunitOption;
        this.rptunitGroupOption = res.rptunitGroupOption;
        this.reportcommOption = res.reportcommOption;
        this.wardOption = res.wardOption;
        this.labgroupOption = res.labgroupOption;
        this.specimenOption = res.specimenOption;
        this.userOption = res.userOption;
      } catch (e) {
        this.$message.warning(e);
      }
    },
    BtnQuery() {
      this.InitPage();
    },
    BtnSort() {
      this.$rmsort(
        { tableColumn: this.SortTableColumn, sortArr: this.sortArr },
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then((res) => {
          this.sortArr = res.data;
          this.InitPage();
        })
        .catch(() => { });
    },
    BtnClear() {
      this.searchobj = {
        strdate: this.$pub.InitDateTime2(0).datefrom,
        enddate: this.$pub.InitDateTime2(0).dateto,
        pattype: "",
        patsex: "",
        germprice: "60.00",
        rptunitid: "",
        hospitalcode: "",
        reqdept: "",
        reqward: "",
        germflag: "",
        sample: "",
        medprice: "60.00",
        report_user: "",
        rechk_user: "",
      };
      this.tableData = [];
    },
    reportuserChange(code, name) {
      this.searchobj.report_user = code;
      this.reportusername = name;
    },
    rechkuserChange(code, name) {
      this.searchobj.rechk_user = code;
      this.rechkusername = name;
    },
    BtnExport() {
      // let options = {
      //     filename: "LIS910 细菌工作量统计.csv",
      // };
      // this.$refs.xTable.exportCsv(options);
      this.tableColumn = [];
      let tableColumn = this.$refs.xTable.getColumns();
      tableColumn.forEach((item) => {
        this.tableColumn.push({ title: item.title, field: item.property });
      });
      let filtertxt = this.getExportFilter();
      this.$pub.exportTableExcel(this.tableData, this.tableColumn, "LIS910 细菌工作量统计.xlsx", filtertxt, "统计条件：");
    },
    // 获取当前导出文件的所有查询条件
    getExportFilter() {
      let filtertxt = "标本日期:" + XEUtils.toDateString(this.searchobj.strdate, "yyyy-MM-dd") + "至" + XEUtils.toDateString(this.searchobj.enddate, "yyyy-MM-dd") + "; ";
      if (this.searchobj.pattype) filtertxt += "病人类型:" + this.getOptionName(this.pattypeOption.filter((item) => this.searchobj.pattype == item.data)) + "; ";
      if (this.searchobj.patsex) filtertxt += "病人性别:" + this.getOptionName(this.sexOption.filter((item) => this.searchobj.patsex == item.value)) + "; ";
      if (this.searchobj.germprice) filtertxt += "细菌单价:" + this.searchobj.germprice + "; ";
      if (this.searchobj.reqward) filtertxt += "申请病区:" + this.getOptionName(this.wardOption.filter((item) => ("," + this.searchobj.reqward + ",").indexOf("," + item.data + ",") > -1)) + "; ";
      if (this.searchobj.germflag) filtertxt += "细菌标志:" + this.getGermFlagName() + "; ";
      if (this.searchobj.rptunitid) filtertxt += "报告单元:" + this.rptunitname + "; ";
      if (this.searchobj.reqdept) filtertxt += "申请科室:" + this.getOptionName(this.deptOption.filter((item) => ("," + this.searchobj.reqdept + ",").indexOf("," + item.data + ",") > -1)) + "; ";
      if (this.searchobj.sample) filtertxt += "标本类型:" + this.getOptionName(this.specimenOption.filter((item) => ("," + this.searchobj.sample + ",").indexOf("," + item.data + ",") > -1)) + "; ";
      if (this.searchobj.medprice) filtertxt += "药敏单价:" + this.searchobj.medprice + "; ";
      if (this.searchobj.hospitalcode) filtertxt += "送检医院:" + this.hospitalname + "; ";
      if (this.searchobj.report_user) filtertxt += "检验者:" + this.reportusername + "; ";
      if (this.searchobj.rechk_user) filtertxt += "审核者:" + this.rechkusername + "; ";
      return filtertxt;
    },
    getOptionName(option) {
      if (option && option.length > 0) {
        let optionname = "";
        option.forEach((item) => {
          if (item.hasOwnProperty("display")) {
            optionname += item.display + ",";
          } else {
            optionname += item.label + ",";
          }
        });
        return optionname.substring(0, optionname.length - 1);
      } else {
        return "";
      }
    },
    getGermFlagName() {
      let name = "";
      switch (this.searchobj.germflag) {
        case "1":
          name = "培养阴性结果";
          break;
        case "2":
          name = "致病菌";
          break;
        case "3":
          name = "正常菌种";
          break;
        case "4":
          name = "正常菌种";
          break;
        default:
          name = "普通项目";
          break;
      }
      return name;
    },
    BtnPrint(index) {
      console.log("sss", index);
      let columnArr = [
        { title: "细菌名称", property: "细菌名称" },
        { title: "细菌次数", property: "细菌次数" },
        { title: "细菌金额", property: "细菌金额" },
        { title: "药敏项次", property: "药敏项次" },
        { title: "药敏金额", property: "药敏金额" },
        { title: "申请科室", property: "申请科室" },
        { title: "合计金额", property: "合计金额" },
      ];
      columnArr.push({ title: "检验日期", property: "chkdate" });
      columnArr.push({ title: "单元", property: "rptunitname" });

      let str = JSON.stringify(columnArr);
      str += "\r";
      str += JSON.stringify(this.$refs.xTable.afterFullData);
      let sql = btoa(encodeURIComponent(str));
      if (index == "1") {
        jsObj.PrintCustomJsonReport("5033", sql, this.userno, "细菌工作量统计", "");
      } else {
        jsObj.SetCustomJsonPrintConfig("5033", sql, this.userno, "细菌工作量统计");
      }
    },
    InitPage() {
      this.loading = true;
      this.$tool
        .request({
          url: "LIS/LIS9/LIS910",
          method: "post",
          data: {
            action: "InitPage",
            sortArr: this.sortArr, //排序
            ...this.searchobj,
          },
        })
        .then((response) => {
          if (!!response) {
            this.loading = false;
            ++this.xTablekey;
            response.Data.forEach((item) => {
              item.chkdate = this.searchobj.strdate + "至" + this.searchobj.enddate;
              item.rptunitname = this.rptunitname;
            });
            this.tableData = response.Data;
          }
        })
        .catch((e) => {
          this.loading = false;
          this.$message.warning(e);
        });
    },
    footerCellClassName({ $rowIndex, column, columnIndex }) {
      if (columnIndex === 0 || ["细菌名称", "细菌次数", "细菌金额", "药敏项次", "药敏金额", "合计金额"].includes(column.property)) {
        if ($rowIndex === 0) {
          return "col-blue";
        } else {
          return "col-red";
        }
      }
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return "总计";
          }
          if (["细菌名称", "细菌次数", "细菌金额", "药敏项次", "药敏金额", "合计金额"].includes(column.property)) {
            return XEUtils.sum(data, column.property);
          }
          return null;
        }),
      ];
    },
    rptunitchange(code, name) {
      this.searchobj.rptunitid = code;
      this.rptunitname = name;
      this.InitPage();
    },
    hospitalchange(code, name) {
      this.searchobj.hospitalcode = code;
      this.hospitalname = name;
    },
  },
};
</Script>

<style scoped>
.pagetop {
  left: 0;
  right: 0;
  width: 100%;
  height: 125px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
  overflow-x: auto;
  overflow-x: overlay;
}

.pagecenter {
  position: absolute;
  top: 130px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}

.el-checkbox__label {
  padding: 0px;
}

.left_nav {
  width: 20%;
  height: 100%;
  border-right: 1px solid #ccc;
  padding: 0px 0px 0px 0px;
  float: left;
  display: inline;
}

.left_nav div {
  cursor: pointer;
  height: 40px;
  width: 100%;
  float: left;
  padding-left: 20px;
  line-height: 40px;
}

.left_nav .active {
  background-color: DeepSkyBlue;
}

.right_nav {
  width: 80%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  float: left;
  display: inline;
}

table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}

.table1style tr td {
  padding: 0px 2px 0px 5px;
}

::v-deep .mytable-style .vxe-footer--column.col-blue {
  color: blue !important;
  font-weight: bold;
}

::v-deep .mytable-style .vxe-body--row.row-blue {
  color: blue !important;
  font-weight: bold;
}

::v-deep .el-checkbox__label {
  padding-left: 0px;
}

::v-deep .el-icon-time {
  line-height: 18px !important;
}

::v-deep .el-range__close-icon {
  line-height: 18px !important;
}

::v-deep .el-range-editor--small .el-range-separator {
  line-height: 17px !important;
}

::-webkit-scrollbar {
  width: 0px;
  height: 5px;
  border: 4px solid white;
}

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 5px;
  width: 5px;
}

/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
  margin-right: 2px;
  border-width: 4px 4px 4px 0;
  border-color: #f1f1f1 transparent #f1f1f1 #f1f1f1;
  background-color: #000000;
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
  border-color: #d2d2d2 transparent #d2d2d2 #d2d2d2;
}

/* Right */
::-webkit-scrollbar-button:horizontal:increment {
  margin-left: 2px;
  border-width: 4px 0 4px 4px;
  border-color: #f1f1f1 #f1f1f1 #f1f1f1 transparent;
  background-color: #000000;
}

::-webkit-scrollbar-button:horizontal:increment:hover {
  border-color: #d2d2d2 #d2d2d2 #d2d2d2 transparent;
}</style>
